<template>
  <table id="all-requst">
    <thead>
    <tr>
      <th style="width: 5%">编号</th>
      <th>标题</th>
      <th style="width: 10%">分类</th>
      <th style="width: 10%">标签</th>
      <th style="width: 10%">浏览数</th>
      <th style="width: 10%">点赞数</th>
      <th style="width: 10%">编写日期</th>
      <th style="width: 5%">状态</th>
      <th style="width: 18%" colspan="3">操作</th>
    </tr>
    </thead>

    <tbody>
    <tr v-for="(blog,index) in blogs" :key="index">
      <td style="width: 5%">{{ blog.articleId }}</td>
      <td>{{ blog.articleTitle }}</td>
      <td style="width: 10%">{{ blog.category.categoryName }}</td>
      <td style="width: 10%">{{ getTags(blog.tags) }}</td>
      <td style="width: 10%">{{ blog.articleViews }}</td>
      <td style="width: 10%">{{ blog.articleLikeCount }}</td>
      <td style="width: 10%">{{ getDate(blog.articleDate)}}</td>
      <td style="width: 5%">{{ blog.articleStatus }}</td>
      <td style="width: 6%"><div class="action">删除</div></td>
      <td style="width: 6%"><div class="action" @click="update(blog)">修改</div></td>
      <td style="width: 6%"><div class="action">发布</div></td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import {request} from "../../axios";

export default {
  name: "Table",
  data(){
    return{
      blogs:[]
    }
  },
  methods:{
    update(blog){
      console.log(blog)
      this.$router.push({
        name:'EditBlog',
        params:{
          blog:JSON.stringify(blog)
        }
      })
    },
    getTags(tags){
      var tagStr="";
      for (let i = 0; i < tags.length; i++) {
         tagStr += tags[i].tagName+" ";
      }
      return tagStr
    },
    getDate(time) {
      var date = new Date(time);
      return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDay()
    }
  },
  mounted() {
    request({
      url:'/getblog',
    }).then(res=>{
      this.blogs=res.data.blogs
      console.log(res.data.blogs)
    })
  }
}
</script>

<style scoped>

award-name{
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  width:100%;
}
table {
  margin-top: 30px;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  font-family: STKaiti;
  border-collapse: collapse;
  border: 1px dashed white;
}

table tbody {
  display: block;
  min-height: 350px;
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
table tr td:nth-child(9) {
  background-color:#1abc9c;
}
table tr:nth-child(even) {
  background-color: #FFFFFF;
}
table tr:nth-child(odd) {
  background-color: #E6E6FA;
}
table th:nth-child(even) {
  background-color: #DDDDDD;
}

table th:nth-child(odd) {
  background-color: #CCCCFF;
}
th {
  color: white;
  text-align: center;
  font-weight: lighter;
  letter-spacing: 2px;
  border-radius:5px;
}
tr, td {
  border: 1px dotted white;
  height: 30px;
  text-align: center;
}
.action{
  font-weight: bold;
  cursor: pointer;
}
.action:hover{
  transform: scale(1.1);
  text-decoration: underline #ffff00;
}

</style>